import {
  Card,
  Calendar,
  Button,
  Row,
  Col,
  List,
  Avatar,
  Alert,
} from 'antd'

import HighlightNumbers from './HighlightNumbers'
import ArticleChart from './ArticleChart'
import AboutMe from './AboutMe'

import moment from 'moment';
import 'moment/locale/zh-cn';
import './home.less'

const myLayout = {
  sm: {
    span: 24
  },
  lg: {
    span: 8
  }
}

interface IProps {
  children?: any;
}

const data = [
  {
    title: 'Ant Design Title 1',
  },
  {
    title: 'Ant Design Title 2',
  },
  {
    title: 'Ant Design Title 3',
  },
];

export default function Home (props: IProps) {
  const onPanelChange = (value: any, mode: any) => {
    console.log(value, mode);
  }

  return (
    <Card
      title="控制面板" 
      bordered={false}
      // extra={} 
    >
      <HighlightNumbers />

      <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
        <ArticleChart myLayout={ myLayout } />

        <Col className="gutter-row" { ...myLayout }>
          <Calendar 
            onPanelChange={onPanelChange} 
            value={ moment() }
          />
        </Col>
      </Row>

      <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
        <Col className="gutter-row" { ...myLayout } >
          <Alert message="Success Tips" type="success" showIcon />
          <Alert message="Informational Notes" type="info" showIcon />
          <Alert message="I can be a React component" 
            type="warning" showIcon closable />
          <Alert message="Error" type="error" showIcon />
        </Col>

        <Col className="gutter-row" { ...myLayout } >
          <div style={{ 
            display: 'flex', 
            justifyContent: 'center', 
            alignItems: 'center',
            height: '100%' 
          }}>
            <AboutMe />
          </div>
        </Col>

        <Col className="gutter-row" { ...myLayout } >
          <List
            itemLayout="horizontal"
            dataSource={data}
            renderItem={item => (
              <List.Item>
                <List.Item.Meta
                  avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
                  title={<a href="https://ant.design">{item.title}</a>}
                  description="Ant Design, a design language..."
                />
              </List.Item>
            )}
          />
        </Col>
      </Row>
      
    </Card>
  )
}
